'use client';

import { useState } from 'react';

/**
 * 一个动态的任务参数配置组件。
 * 根据传入的任务ID，该组件会渲染对应的参数配置表单（如滑块、下拉框），
 * 并提供一个按钮来触发表单提交，将配置好的参数传递给父组件。
 *
 * @param {object} props - 组件的属性对象。
 * @param {string} props.taskId - 任务的唯一标识符（如 'detection', 'classification'）。用于决定渲染哪一套配置参数。
 * @param {function(object): void} props.onStartTask - 当用户点击“开始任务”按钮时触发的回调函数。它接收一个包含当前所有配置参数的对象作为参数。
 * @param {boolean} props.disabled - 控制“开始任务”按钮是否禁用的状态。如果为 true，按钮不可点击。
 * @param {string} props.taskStatus - 当前任务的状态（例如 'running'）。用于改变按钮的文本和样式。
 * @returns {JSX.Element} 返回一个渲染好的React元素，包含动态生成的表单和一个用于启动任务的按钮。
 */
export default function TaskParameterConfig({ taskId, onStartTask, disabled, taskStatus }) {
  const [parameters, setParameters] = useState({
    sensitivity: 0.5,
    // model: 'default'
  });

  const handleParameterChange = (key, value) => {
    setParameters(prev => ({
      ...prev,
      [key]: value
    }));
  };

  const handleStartTask = () => {
    onStartTask(parameters);
  };

  const getTaskConfig = (taskId) => {
    switch (taskId) {
      case 'detection':
        return {
          title: '病灶检测参数配置',
          params: [
            {
              key: 'sensitivity',
              label: '置信度阈值',
              type: 'range',
              min: 0.1,
              max: 1.0,
              step: 0.1,
              value: parameters.sensitivity
            },
          ]
        };
      case 'classification':
        return {
          title: '病灶分类参数配置',
          params: [
            {
              key: 'model',
              label: '模型选择',
              type: 'select',
              options: ['default', 'advanced', 'experimental'],
              value: parameters.model
            }
          ]
        };
      case 'staging':    // 新增分期任务,只有肝脏癌症有
        return {
          title: '病灶分期参数配置',
          params: [
            {
              key: 'model',
              label: '模型选择',
              type: 'select',
              options: ['default', 'advanced', 'experimental'],
              value: parameters.model
            }
          ]
        };
      case 'segmentation':
        return {
          title: '病灶分割参数配置',
          params: [
            {
              key: 'model',
              label: '模型选择',
              type: 'select',
              options: ['default', 'advanced', 'experimental'],
              value: parameters.model
            }
          ]
        };
      case 'regression':
        return {
          title: '回归分析参数配置',
          params: [
            {
              key: 'model',
              label: '模型选择',
              type: 'select',
              options: ['default', 'advanced', 'experimental'],
              value: parameters.model
            }
          ]
        };
      default:
        return {
          title: '参数配置',
          params: []
        };
    }
  };

  const config = getTaskConfig(taskId);

  return (
    <div className="bg-white p-6 rounded-lg border border-gray-200">
      <h3 className="text-lg font-semibold mb-4">{config.title}</h3>

      <div className="space-y-4">
        {config.params.map((param) => (
          <div key={param.key}>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              {param.label}
            </label>

            {param.type === 'range' && (
              <div>
                <input
                  type="range"
                  min={param.min}
                  max={param.max}
                  step={param.step}
                  value={param.value}
                  onChange={(e) => handleParameterChange(param.key, parseFloat(e.target.value))}
                  className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                />
                <div className="text-sm text-gray-600 mt-1">
                  当前值: {param.value}
                </div>
              </div>
            )}

            {param.type === 'select' && (
              <select
                value={param.value}
                onChange={(e) => handleParameterChange(param.key, e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
                {param.options.map((option) => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </select>
            )}
          </div>
        ))}
      </div>

      <div className="mt-6">
        <button
          onClick={handleStartTask}
          disabled={disabled}
          className={`w-full py-3 px-4 rounded-lg font-medium ${
            !disabled
              ? 'bg-green-600 text-white hover:bg-green-700'
              : 'bg-gray-300 text-gray-500 cursor-not-allowed'
          }`}
        >
          {taskStatus === 'running' ? '处理中...' : '开始任务'}
        </button>
      </div>
    </div>
  );
}


// Parameters 更改的完整流程
// 初始化：组件加载时，使用默认值初始化 parameters 状态
// 配置生成：getTaskConfig 函数根据 taskId 生成对应的参数配置
// UI渲染：根据配置渲染相应的输入控件，控件的值绑定到 parameters 状态
// 用户交互：用户操作控件（拖动滑块或选择下拉项）
// 事件触发：控件的 onChange 事件被触发
// 状态更新：调用 handleParameterChange 更新 parameters 状态
// 组件重渲染：状态更新后，组件重新渲染，显示新的参数值
// 任务启动：用户点击"开始任务"按钮时，通过 handleStartTask 将当前 parameters 传递给父组件